<template>
  <div class="xzfw">
    <Card title="基本设置">
      <el-form size="small" label-width="80px" inline>
        <el-form-item label="名称">
          <el-input v-model="valA" placeholder="输入服务名称"></el-input>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="valB"></el-input>
        </el-form-item>
        <br />
        <el-form-item class="textarea" label="备注">
          <el-input type="textarea" v-model="valC"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="添加服务">
      <el-button slot="cRight" type="primary" size="mini" @click="fwNums++">
        添加服务
      </el-button>
      <el-tabs type="border-card" v-if="fwNums !== 0">
        <el-tab-pane
          v-for="item in fwNums"
          :key="item + 'A'"
          :label="'Service' + item"
        >
          <Fw />
        </el-tab-pane>
      </el-tabs>
    </Card>
    <Card title="容器发布">
      <el-button slot="cRight" type="primary" size="mini" @click="rqNums++">
        添加容器
      </el-button>
      <el-tabs type="border-card" v-if="rqNums !== 0">
        <el-tab-pane
          v-for="item in rqNums"
          :key="item + 'B'"
          :label="'容器' + item"
        >
          <Rq @selectJx="selectJx" />
        </el-tab-pane>
      </el-tabs>
    </Card>
    <Card title="超时时间">
      <el-form size="mini">
        <el-form-item label="超时终止时间">
          <el-select placeholder="请选择" :value="1">
            <el-option label="10" :value="1"> </el-option>
            <el-option label="20" :value="2"> </el-option>
            <el-option label="30" :value="3"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Fw from './Fw'
import Rq from './Rq'
export default {
  components: {
    Card,
    Fw,
    Rq
  },

  data() {
    return {
      valA: '',
      valB: '',
      valC: '',
      valD: '',
      valE: '',
      selectVal: '',
      fwNums: 0,
      rqNums: 0
    }
  },

  methods: {
    selectJx() {
      this.$emit('selectJx', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.textarea {
  /deep/.el-form-item__content {
    width: 500px !important;
  }
}
</style>
